<template>
  <a-modal
    title="单位管理"
    :width="850"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="14">
            <!-- 唯一编号 -->
            <a-row>
              <a-col :span="24">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="单位唯一编号"
                >
                  <a-input :disabled="editModel" v-decorator="['idno', {rules: [{ required: true, message: '编号不能为空' }]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 单位代码  -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="单位代码"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['orgCode', {rules: [{ required: true, message: '单位不能为空' }]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 单位全称 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="单位全称"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['orgFullName', {rules: [{ required: true, message: '单位全称不能为空' }]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 单位简称 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="单位简称"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['orgName', {rules: [{ required: true, message: '单位简称不能为空' }]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 单位俗称 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="单位俗称"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['orgPopularName', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 单位地址 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="单位地址"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['orgAddr', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="10">
            <!-- 负责人 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="负责人"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['orgBossName', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 省份 -->
            <!-- <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="省份"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select
                    showSearch
                    placeholder="Select a person"
                    optionFilterProp="children"
                    style="width: 200px"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange"
                    :filterOption="filterOption"
                    v-decorator="['pronv', {}]"
                  >
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="tom">Tom</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row> -->
            <!-- 所在城市 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="所在城市"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <!-- <a-dropdown v-decorator="['orgBossName', {}]">
                    <a-menu slot="overlay" >
                      <a-menu-item key="成都"><a-icon type="user" />四川</a-menu-item>
                      <a-menu-item key="贵州"><a-icon type="user" />贵州</a-menu-item>
                      <a-menu-item key="广西"><a-icon type="user" />广西</a-menu-item>
                      <a-menu-item key="湖南"><a-icon type="user" />湖南</a-menu-item>
                    </a-menu>
                    <a-button style="margin-left: 8px"> Button <a-icon type="down" /> </a-button>
                  </a-dropdown> -->
                  <a-input v-decorator="['city', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 其他信息 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="其他信息"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-textarea :rows="4" v-decorator="['orgDisc', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 单位logo -->
            <!-- <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="单位logo"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-upload
                    name="avatar"
                    listType="picture-card"
                    class="avatar-uploader"
                    :showUploadList="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  >
                    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row> -->
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getOrgInfoByPid, saveOrgInfo } from '../org'

export default {
  name: 'OrgModal',
  props: {
    // theOrgPid: { type: String, default: '' },
    // visible: { type: Boolean, default: false }
  },
  data () {
    return {
      // form: this.$form.createForm(this),
      editModel: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      orgInfo: {
        sysSeq: 0,
        pid: '' // 主键
        // idno: '', // 唯一编号
        // orgCode: '', // 单位代码
        // orgFullName: '',
        // orgName: '',
        // orgPopularName: '',
        // orgAddr: '',
        // orgBossName: '',
        // province: '',
        // city: '',
        // orgDisc: '',
        // orgLogo1: ''
      },
      theOrgPid: '',
      visible: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
  },
  methods: {
    showAddModal () {
      this.visible = true
    },
    showEditModal (orgPid) {
      this.editModel = true
      this.theOrgPid = orgPid
      console.log(this.theOrgPid)
      if (orgPid) {
        this.confirmLoading = true
        this.form.setFieldsValue({ })
        const headers = {}
        getOrgInfoByPid(orgPid, headers)
          .then(res => {
            console.log(res)
            if (res.code !== 'C0') {
              this.orgInfo.sysSeq = res.data.sysSeq
              this.orgInfo.pid = res.data.pid
              this.form.setFieldsValue(res.data)
              console.log(this.form.getFieldsValue())
              console.log()
            }
            // console.log(this.orgInfo.sysSeq)
          })
        this.confirmLoading = false
      }
      this.visible = true
    },
    // add (id) {
    //   this.edit({ parentId: id })
    // },
    // edit (record) {
    //   this.mdl = Object.assign({}, record)
    //   this.visible = true
    //   this.$nextTick(() => {
    //     this.form.setFieldsValue({ ...record })
    //   })
    // },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      const _this = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)

          _this.confirmLoading = true
          // 模拟后端请求 2000 毫秒延迟
          new Promise((resolve) => {
            resolve(saveOrgInfo(Object.assign(this.orgInfo, this.form.getFieldsValue()), {}))
          }).then(() => {
            // Do something
            _this.$message.success('保存成功')
            _this.$emit('ok')
          }).catch(() => {
            // Do something
          }).finally(() => {
            _this.confirmLoading = false
            _this.close()
            _this.orgInfo = {
              sysSeq: 0,
              pid: '' // 主键
            }
          })
        }
      })
    },
    handleCancel () {
      this.close()
    }

  }
}
</script>
